<!-- 添加文章页面 -->
<template>
    <div>
        <a-card>
            <h4 style="margin-left: 10px; color: #d6a20f; text-align: center">
                {{ id ? "编辑文章" : "写文章" }}
            </h4>
            <a-form-model
                :model="artInfo"
                ref="artInfoRef"
                :rules="artInfoRules"
                :hideRequiredMark="true"
            >
                <!-- 标题 -->
                <a-form-model-item label="文章标题" prop="title">
                    <a-input v-model="artInfo.title"></a-input>
                </a-form-model-item>
                <!-- 分类 -->
                <a-form-model-item label="文章分类" prop="categoryId">
                    <a-select
                        v-model="artInfo.categoryId"
                        @change="cateChange"
                        placeholder="请选择分类"
                    >
                        <a-select-option
                            v-for="cate in cateList"
                            :key="cate.id"
                            :value="cate.id"
                        >
                            {{ cate.name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <!-- 博客文章标签 -->
                <a-form-model-item label="文章标签" prop="tagIds">
                    <a-select
                        mode="multiple"
                        v-model="artInfo.tagIds"
                        style="width: 100%"
                        placeholder="请选择博客文章标签"
                    >
                        <a-select-option v-for="tag in tagList" :key="tag.id">
                            {{ tag.name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <!-- 描述 -->
                <a-form-model-item label="文章描述" prop="description">
                    <a-textarea v-model="artInfo.description"></a-textarea>
                </a-form-model-item>
                <!--  -->
                <a-form-model layout="inline">
                    <!-- 原创标注 -->
                    <a-form-model-item label="原创标记" prop="flag">
                        <a-input
                            v-model="artInfo.flag"
                            placeholder="博客标记"
                        ></a-input>
                    </a-form-model-item>
                    <!-- 转载声明 -->
                    <a-form-model-item
                        label="转载声明是否开启"
                        prop="shareStatement"
                    >
                        <a-switch
                            :checked="IsShareStatement"
                            checked-children="是"
                            un-checked-children="否"
                            @change="shareStatementChange"
                        />
                    </a-form-model-item>
                    <!-- 是否发布 -->
                    <a-form-model-item label="是否发布" prop="published">
                        <a-switch
                            :checked="IsPublished"
                            checked-children="是"
                            un-checked-children="否"
                            @change="publishedChange"
                        />
                    </a-form-model-item>
                </a-form-model>
                <!-- 文章内容 -->
                <a-form-model-item label="文章内容" prop="contents">
                    <div style="height: 600px">
                        <!-- Markdown编辑器 -->
                        <mavon-editor
                            v-model="artInfo.contents"
                            :toolbars="toolbars"
                            :codeStyle="codeStyle"
                            ref="artcontentsMd"
                            placeholder="编辑文章内容..."
                            style="height: 100%; z-index: 999; font-size: 16px"
                        />
                    </div>
                </a-form-model-item>
                <!-- 提交 -->
                <a-form-model-item>
                    <a-button
                        type="primary"
                        style="margin: 0 10px 0 0"
                        @click="artSubmit(artInfo.id)"
                    >
                        提交
                    </a-button>
                    <a-button
                        type="danger"
                        style="margin: 0 10px"
                        @click="addCancel()"
                        >取消</a-button
                    >
                </a-form-model-item>
            </a-form-model>
        </a-card>
    </div>
</template>

<script>
export default {
    props: ["id"],
    data() {
        return {
            artInfo: {
                id: 0,
                title: "",
                categoryId: undefined,
                description: "",
                contents: "",
                flag: "",
                shareStatement: false,
                published: false,
                userId: 0,
                tagIds: [],
            },
            cateList: [],
            tagList: [],

            // 表单验证
            artInfoRules: {
                title: [
                    {
                        required: true,
                        message: "请输入文章标题",
                        trigger: "blur",
                    },
                ],
                categoryId: [
                    {
                        required: true,
                        message: "请选择文章分类",
                        trigger: "change",
                    },
                ],
                description: [
                    {
                        required: true,
                        message: "请选择文章描述",
                        trigger: "blur",
                    },
                    {
                        max: 120,
                        message: "文章描述最多20个字符",
                        trigger: "change",
                    },
                ],
                contents: [
                    {
                        required: true,
                        message: "请输入文章内容",
                        trigger: "blur",
                    },
                ],
                flag: [
                    {
                        required: true,
                        message: "请输入文章标记",
                        trigger: "blur",
                    },
                ],
            },

            // Markdown工具栏配置
            toolbars: {
                bold: true, // 粗体
                italic: true, // 斜体
                header: true, // 标题
                underline: true, // 下划线
                mark: true, // 标记
                superscript: true, // 上角标
                quote: true, // 引用
                ol: true, // 有序列表
                link: true, // 链接
                imagelink: true, // 图片链接
                help: true, // 帮助
                code: true, // code
                subfield: true, // 是否需要分栏
                fullscreen: true, // 全屏编辑
                readmodel: true, // 沉浸式阅读
                undo: true, // 上一步
                trash: true, // 清空
                save: true, // 保存（触发events中的save事件）
                navigation: true, // 导航目录
                alignleft: false, // 左对齐
                aligncenter: false, // 居中
                alignright: false, // 右对齐
                subfield: false, // 单双栏模式
                preview: false, // 预览
            },
            // markdown编辑器代码样式 monokai-sublime
            codeStyle: "atom-one-light", //主题
        };
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
        this.getCateList();
        this.getTagList();
        if (this.id) {
            this.getArtInfo(this.id);
        }
    },
    //计算属性
    computed: {
        IsShareStatement: function () {
            if (this.artInfo.shareStatement == true) {
                return true;
            } else {
                return false;
            }
        },
        IsPublished: function () {
            if (this.artInfo.published == true) {
                return true;
            } else {
                return false;
            }
        },
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {},
    //方法集
    methods: {
        //查询文章信息
        async getArtInfo(id) {
            const { data: res } = await this.$axios.get(`/blogs/${id}`);
            if (res.status != 200) {
                return this.$message.error(res.message);
            }
            this.artInfo = res.data;
            this.artInfo.id = res.data.id;
        },

        // 获取分类列表
        async getCateList() {
            const { data: res } = await this.$axios.get("/categories");
            if (res.status != 200) {
                return this.$message.error(res.message);
            }
            this.cateList = res.data;
        },

        //分类选择
        cateChange(val) {
            this.artInfo.categoryId = val;
        },

        // 获取标签列表
        async getTagList() {
            const { data: res } = await this.$axios.get("/tags");
            if (res.status != 200) {
                return this.$message.error(res.message);
            }
            this.tagList = res.data;
        },

        // 转载声明选择事件
        shareStatementChange(checked) {
            if (checked) {
                this.artInfo.shareStatement = true;
            } else {
                this.artInfo.shareStatement = false;
            }
        },
        // 是否发布选择事件
        publishedChange(checked) {
            if (checked) {
                this.artInfo.published = true;
            } else {
                this.artInfo.published = false;
            }
        },

        //提交(更新)文章
        artSubmit(id) {
            this.$refs.artInfoRef.validate(async (valid) => {
                if (id == 0) {
                    //添加文章
                    const res = await this.$axios.post(
                        "/admin/blog",
                        this.artInfo
                    );
                    if (res.status != 201) {
                        return this.$message.error(res.message);
                    }
                    this.$router.push("/artlist");
                    this.$message.success("添加文章成功");
                } else {
                    //更新文章
                    const { data: res } = await this.$axios.put(
                        `/admin/blog/${id}`,
                        this.artInfo
                    );
                    if (res.status != 200) {
                        return this.$message.error(res.message);
                    }
                    this.$router.push("/artlist");
                    this.$message.success("更新文章成功");
                }
            });
        },

        // 取消
        addCancel() {
            this.$refs.artInfoRef.resetFields();
        },

        // Markdown编辑器内容改变
        // change(value, render) {
        //     this.html = render;
        //     this.artInfo.contents = value;
        //     this.artInfo.contents = render;
        // },

        // 处理Markdown编辑器图片上传
        // handleImgAdd(pos, $file) {
        //     // 第一步.将图片上传到服务器
        //     var formdata = new FormData();
        //     formdata.append('file', $file);
        //     this.$axios.post("/upload", formdata, {
        //         headers: {
        //             'contents-Type': 'multipart/form-data',
        //         }
        //     }).then(res => {
        //         // console.log("res:" , res);
        //         var url = res.data.url;
        //         // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        //         this.$refs.artcontentsMd.$img2Url(pos, url);
        //     });
        // },

        // 处理Markdown编辑器图片删除
        // handleImgDel() {
        //     console.log("处理图片删除");
        // },
    },
};
</script>
<style>
</style>